<style lang="less">
@import './style.less';
</style>

<template>
	<div class="log">
		<div class="op-header">
			<el-button @click="deleteAll" class="remove" type="danger">
				<i class="el-icon-delete icon-right"/>清除全部
			</el-button>
			<div class="search">
				<el-input class="search-input" placeholder="请输入查询关键字" prefix-icon="el-icon-search" v-model="searchInput"/>
				<el-button @click="search" class="search-button" type="primary">
					<i class="el-icon-search icon-right"/>查询
				</el-button>
			</div>
		</div>
		<table-ex
			:columns="columns"
			:on-operation="onClickOperation"
			:on-option="onClickOption"
			:on-page-change="onPageChange"
			:options="options"
			:rows="logs"
			:total="logsTotal"
		/>
	</div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import pageConfig from './config'

import tableEx from '@/components/table/tableEx'

export default {
  name: 'log',
  components: {
    'table-ex': tableEx
  },
  data() {
    return {
      // 绑定输入
      searchInput: '',
      columns: pageConfig.columns,
      options: pageConfig.options
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    ...mapGetters(['logs', 'logsTotal'])
  },
  methods: {
    ...mapActions(['getLogs', 'removeLog']),

    ...mapMutations(['SETLOGPAGE', 'SETLOGPAGE']),

    loadData() {
      this.getLogs()
    },

    deleteAll() {
      let lIds = this.logs.map(item => {
        return item.id
      })
      this.removeLog({ lIds })
    },

    search() {
      const filter = {
        keyword: this.searchInput ? this.searchInput : null
      }
      this.SETLOGPAGE({
        number: 1,
        filter
      })
      this.getLogs()
    },

    onClickOption(option, rows) {
      if (option === 'batchrefresh') {
        this.loadData()
      } else {
        let lIds = rows.map(item => {
          return item.id
        })
        this.removeLog({ lIds })
      }
    },

    onClickOperation(oper, row) {
      let params = {
        lIds: [row.id]
      }
      this.removeLog(params)
    },

    onPageChange(number) {
      this.SETLOGPAGE({ number })
      this.getLogs()
    }
  }
}
</script>

